import { useState, useEffect } from 'react';
import { Spin } from 'antd';
import { TextWidget } from '@inbiz/react';
import { BannerProps } from '../index';
import { getDetail } from '../servies';
import { queryStringParse } from '../../web/utils';

const Detail = (props: BannerProps) => {
  const { prefixCls = 'inbiz-Banner-detail' } = props;
  const [detailInfo, setDetail] = useState<Banner.ImgItem>();
  const params = queryStringParse();

  //详情接口
  const getDetailInfo = () => {
    const { imgId } = params;
    if (!imgId) {
      return;
    }
    <Spin />;
    getDetail({ id: imgId }).then((res) => {
      if (res) {
        setDetail(res);
      }
    });
  };

  useEffect(() => {
    getDetailInfo();
  }, []);

  return (
    <div className={prefixCls}>
      <div className={`${prefixCls}-title`}>{detailInfo?.Title}</div>
      <div className={`${prefixCls}-abstract`}>
        {/* 摘要 */}
        <TextWidget>banner.summary</TextWidget>:{' '}
        <span dangerouslySetInnerHTML={{ __html: detailInfo?.Summary || '' }}></span>
      </div>
      <div className={`${prefixCls}-info`}>
        <span>{detailInfo?.Creator} &nbsp;</span>
        <span>{detailInfo?.CreateTimeStr} &nbsp;</span>
        <span className="inbiz-Banner-detail-info-source">
          {detailInfo?.ContentCategoryName} &nbsp;
        </span>
      </div>
      <div className={`${prefixCls}-main`}>
        {detailInfo?.ImgUrl && (
          <img
            src={detailInfo?.ImgUrl}
          />
        )}
      </div>
      <div
        className={`${prefixCls}-describe`}
        dangerouslySetInnerHTML={{ __html: detailInfo?.Content || '' }}
      />
    </div>
  );
};

export default Detail;
